<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
    <script type="text/javascript" th:src="@{/js/popper.min.js}" ></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>

    <style>

        #tableDiv{
            margin: 20px 50px;
        }

        .card-body input{
            margin: 0 10px;
        }

    </style>

</head>
<body>

<div id="container">

    <!--  card 圆角   -->
    <div class="card border-primary">
        <div class="card-header bg-primary">
            <h3 class="text-white" v-fontsize="30" >品牌管理</h3>
        </div>
        <div class="card-footer form-inline">
            <div class="card-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id"/>
                </label>

                <label>
                    Name:
                    <!-- @keyup.113="add" 其实就是f2，但是写113的话不容易理解，所以需要自定义全局按键修饰符 --> <!--@keyup.enter="add"-->
                    <input type="text" class="form-control" v-model="name" @keyup.f2="add" />
                </label>


                <input type="button" value="添加" class="btn btn-primary" @click="add">

                <label>
                    搜索名称关键字：
                    <input type="text" id="search" class="form-control" v-model="keyWords" v-focus="'red'" />
                </label>

            </div>
        </div>
    </div>

    <div id="tableDiv" >
        <table class="table table-bordered table-hover table-striped" >
            <thead>
            <tr>
                <th>Id</th>
                <th>名字</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!--            <tr v-for="item in list" :key="item.id">-->
            <tr v-for="item in search(keyWords)" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time|msgDateFormat}}</td>
                <td><a href="#" @click.prevent="del(item.id)">删除</a></td>
            </tr>
            </tbody>

        </table>

    </div>


</div>


<script>
    //js获取焦点
    document.getElementById('search').focus();
    // 定义一个全局按键修饰符
    Vue.config.keyCodes.f2=113;

    Vue.directive("focus",{
        bind:function(el,binding){
            //alert("一运行立即执行")
            el.style.color=binding.value;
        },
        inserted:function(el){
            el.focus();
            //alert("随后执行")
        },
        updated:function(el){
            //alert("updated")
        }
    });

    // Vue.directive("fontsize",{
    //     bind:function(el,binding){
    //         el.style.fontSize=binding.value+"px";
    //     }
    // })

    var vue = new Vue({
        el:"#container",
        data:{
            id:"",
            name:"",
            keyWords:"",
            list:[
                {id:1,name:"奔驰",time:new Date()},
                {id:2,name:"宝马",time:new Date()},
                {id:3,name:"奥迪",time:new Date()}
            ]
        },
        methods:{
            add(){
                this.list.push({id:this.id,name:this.name,time:new Date()});
                this.id=this.name="";
            },
            del(id){
                var index = -1;
                //some 循环数组，返回true终止
                // this.list.some(function(item,i){
                //     if(item.id == id){
                //         //移除记录
                //         index = i;
                //         return true;
                //     }
                // });

                //通过findIndex方法获取要删除记录的index
                index = this.list.findIndex(item =>{
                    if(item.id == id){
                        return true;
                    }
                })
                this.list.splice(index,1);
            },
            search(keyWords){
                // if(keyWords==""){
                //     return this.list;
                // }
                // // 保存新的数组
                // var newList = [];
                // this.list.forEach(function(item){
                //     if(item.name.indexOf(keyWords)!=-1){
                //         newList.push(item);
                //     }
                // })
                // return newList;
                return this.list.filter(item =>{
                    //includes 是否包含
                    if(item.name.includes(keyWords)){
                        return item;
                    }
                })
            }
        },
        filters:{
            msgDateFormat: function (time) {
                let year = time.getFullYear();
                let month = (time.getMonth()+1).toString().padStart(2,"0");
                let day = time.getDate();
                return year+"年"+month+"月"+day+"日";
            }
        },
        directives:{
            "fontsize":function(el,binding){
                el.style.fontSize=binding.value+"px";
            }
        }
    })
</script>

</body>
</html>
